<template>
  <div>
    <header><van-nav-bar title="科普健康义诊直播间" left-text="返回" left-arrow @click-left="$router.back()" /></header>
    <van-tabs v-model:active="activeName" @change="hanldeChange">
      <van-tab v-for="(item, ind) in tabson" :key="ind" :title="item"></van-tab>
    </van-tabs>
    <div class="medicList">
      <div v-for="(item, ind) in SmedicList" :key="ind" class="mp" @click="Swedic(item)">
        <div>
          <img :src="item.img" alt="" >
        </div>
        <div>{{ item.title }}</div>
        <!-- <div>{{ item.date[0] }}---{{ item.date[1] }}</div> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
//import "./index.css"


const activeName = ref<number>(0)
const tid = ref(1)
import axios from 'axios';
import router from '@/router';


const medicList = ref<any[]>([])
const SmedicList = ref<any[]>([])

const tabson = ref(['精彩回放', '皮肤健康', '神经频道', '男性健康', '慢病科普', '妇儿科普'])
const hanldeChange = (index: number) => {
  SmedicList.value = []
  console.log(index)
  tid.value = index + 1

  medicList.value.forEach((item, index) => {
    if (item.tabid == tid.value) {
      SmedicList.value.push(item)
    }
  })
  console.log(SmedicList.value);
}

const Swedic = (item: any) => {
  console.log(item);

  localStorage.setItem('id', item.id)
  router.push({
    path: '/livedtl',
    query: {
      id: item.id
    }
  })
}

axios
  .get('/api/live')
  .then((res) => {
    medicList.value = res.data.data
    medicList.value.forEach((item, index) => {
      if (item.tabid == tid.value) {
        SmedicList.value.push(item)
      }
    })
    console.log(SmedicList.value);

  })
  .catch((err) => {
    console.log(err)
  })



</script>
<style scoped lang="scss">
.medicList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 10px;
    .mp{
        width: 45%;
    }
}
.mp{
  width: 50%;
  height: 50%;
  // background: red;
  margin-left: 20px;
  img{
   width: 300px;
   height: 300px;
    margin-top: 20px;
    position: 15px 15px;
    
  }
}
</style>